<template>
  <div class="index clearafter">
    <module-head></module-head>
    <div class="content flex">
      <div class="w220">
        <menu-list></menu-list>
      </div>
      <div class="w980 flex_full">
        <p class="flex flex_vcenter pdb20">
          <i class="titleTag"></i>
          <span class="fRedBig">随访信息列表</span>
        </p>
        <div class="whiteBg">
          <ul class="flex">
            <li>
              <div class="searchBox flex flex_vcenter">
                <label for="exampleInputEmai3">随访科室</label>
                <input type="text" class="form-control" id="exampleInputEmai3" v-model="deptText">
                <ul v-show="searchDeptList.length != 0">
                  <li v-for="item in searchDeptList" @click="selSearchDept(item)">{{item.deptName}}</li>
                </ul>
              </div>
            </li>
            <li class="ml20 flex flex_vcenter">
              <label for="exampleInputEmai2" style="width:100px;">随访大类</label>
              <select class="form-control" v-model="searchSfType" id="exampleInputEmai2">
                <option v-for="item in sfType" :value="item.value">{{item.text}}</option>
              </select>
            </li>
            <li class="ml20">
              <button class="yellowBtn" @click="queryRuleList(searchSfType, selSearchDeptName.localDeptId)">查询</button>
            </li>
          </ul>
          <div class="mt20"></div>
          <table class="table table-striped table-hover">
            <thead>
            <tr>
              <th>随访类型</th>
              <th>姓名</th>
              <th>性别</th>
              <th>年龄</th>
              <th>证件类型</th>
              <th>证件号码</th>
              <th>科室</th>
              <th>联系电话</th>
              <th>随访终止</th>
              <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="item in tableData">
              <td>{{item.sfzl | SFZL}}</td>
              <td>{{item.patient.BRXM}}</td>
              <td>{{item.patient.BRXB | sex}}</td>
              <td>{{item.patient.CSNY | old}}</td>
              <td></td>
              <td></td>
              <td>{{item.patient.BRKSVALUE}}</td>
              <td>{{item.patient.LXDH}}</td>
              <td>{{item.jhzt | jhzt}}</td>
              <td>
                <span title="管理" @click="toVisitInfoManage(item)">
                  <img src="../../assets/img/jsszy/管理1.png" alt="" class="xicon">
                </span>
                <span title="终止" @click="endProcess(item)" v-show="item.jhzt == 0" class="pl10">
                  <img src="../../assets/img/jsszy/移除.png" alt="" class="xicon">
                </span>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="modal fade" tabindex="-1" role="dialog" id="confirmEnd">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">确认终止此条随访计划吗？</h4>
          </div>
          <div class="modal-body">
            <div class="flex">
              <label>终止原因：</label>
              <input type="text" class="form-control" v-model="reason">
            </div>
          </div>
          <div class="modal-footer flex flex_end">
            <button class="btn btn-default" @click="confirmRuleEnd()">确认</button>
            <button class="btn btn-danger" data-dismiss="modal">取消</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
  </div>
</template>

<script>
  import Public from 'assets/public.js'
  import 'assets/lib/laydate/laydate.js'
  import 'assets/lib/laydate/need/laydate.css'
  import 'assets/lib/laydate/skins/danlan/laydate.css'
  import moduleHead from 'components/module-head'
  import menuList from 'components/menu-list'
  import 'assets/lib/bootstrap-3.3.2/js/bootstrap.min.js'
  export default {
    data () {
      return {
        deptText: '',
        searchDeptList: [],
        userSelEvent: false,
        selSearchDeptName: {},
        tableData: [],
        sfType: [
          {text:'慢病随访',value:1},
//          {text:'出院普通随访',value:2},
          {text:'门诊普通随访',value:3}
        ],
        searchSfType: '',
        endParam: {},
        reason: ''
      }
    },
    components: {
      moduleHead, menuList
    },
    filters : {
      'SFZL' (val) {
        if (val == 1) {
          return '慢病随访'
        } else if (val == 2) {
          return '出院普通随访'
        }else if (val == 3) {
          return '门诊普通随访'
        }
      },
      'sex' (val) {
        if (val == 1) {
          return '男'
        } else if (val == 2) {
          return '女'
        } else {
          return '不详'
        }
      },
      'old' (val) {
        if (val) {
          var year = val.slice(0,4)
          return new Date().getFullYear()-year
        }
      },
      'jhzt' (val) {
        if (val == 0) {
          return '待随访'
        } else if (val == 1){
          return '已随访'
        } else {
          return '作废'
        }
      }
    },
    watch: {
      'deptText' (val, oldval) {
        if (this.userSelEvent == false) {
          this.queryDept()
        } else {
          this.userSelEvent = false
        }
      }
    },
    ready () {
      this.queryRuleList(1, 0)
    },
    methods: {
      queryDept () {
        var self = this
        var param = this.deptText
        $.when(Public.commonajaxSf("cas.doctorCerfService", "findDeptlike", JSON.stringify(['0ab18621-cc00-4c4a-9b35-4ff28a7d9bcc', param])))
          .done(function(res) {
            if (res.code == 200) {
              self.searchDeptList = res.body
            }
          })
      },
      selSearchDept (item) {
        this.selSearchDeptName = item
        this.searchDeptList = []
        this.deptText = item.deptName
        this.userSelEvent = true
      },
      queryRuleList (SFZL, SFKS) {
        var self = this
        $.ajax({
          type:"POST",
          url:Public.sfBaseUrl+"/NIS/cas/mobile/evaluation/v56_update1/get/followupinfolist",
          data:{
            SFZL: SFZL,
            SFKS: SFKS,
            token: sessionStorage.getItem('sfToken')
          },
          success:function(res){
            if (res.Data) {
              self.tableData = res.Data
            } else {
              Public.ajaxPrompt(res.Msg)
            }
          }
        })
      },
      endProcess (endParam) {
        this.endParam = endParam
        $('#confirmEnd').modal('show')
      },
      confirmRuleEnd () {
        if (!this.reason) {
          Public.ajaxPrompt('请输入终止原因')
          return
        }
        var self = this
        $.ajax({
          type:"POST",
          url:Public.sfBaseUrl+"/NIS/cas/mobile/evaluation/v56_update1/stop/plan",
          data:{
            BRLX: self.endParam.brlx,
            ZYH: self.endParam.zyh,
            SFZL: self.endParam.sfzl,
            ZZYY: self.reason,
            token: sessionStorage.getItem('sfToken')
          },
          success:function(res){
            if (res.Data) {
              Public.ajaxPrompt('已终止随访计划')
              $('#confirmEnd').modal('hide')
              self.queryRuleList(1, 0)
            }
          }
        })
      },
      toVisitInfoManage (urlParam) {
        if (urlParam.jhzt == 9) {
          var infoStr = '该计划已终止，终止原因：' + urlParam.zzyy
          Public.ajaxPrompt(infoStr)
        } else {
          var urlParam = encodeURIComponent(JSON.stringify(urlParam))
          window.location.href="visitInfoManage.html?param="+urlParam
        }
      }
    }
  }
</script>

<style scoped>
  @import '../../assets/reset.css';
  @import '../../assets/flex.css';
  @import '../../assets/lib/bootstrap-3.3.2/css/bootstrap.min.css';
  .searchBox{
    position:relative;
  }
  .searchBox label{
    width:100px;
  }
  .searchBox>ul{
    position:absolute;
    top:37px;
    width:196px;
    right:0;
    max-height: 150px;
    overflow: auto;
    background-color: white;
    border-right: 5px;
    border: 1px solid #FAEEE9;
  }
  .searchBox>ul>li{
    cursor: pointer;
    padding:5px 0 5px 10px;
  }
  .searchBox>ul>li:hover{
    background-color: #FAEEE9;
  }
</style>
